import React, { Component } from 'react'
import {
  Text,
  View,
  TouchableOpacity,
  StyleSheet,
  StatusBar,
  ScrollView,
  Platform,
  Animated,
  InteractionManager,
  Dimensions,
} from 'react-native'

const deviceWidth = Dimensions.get('window').width;
const deviceHeight = Dimensions.get('window').height;

import RightItemHeight from './city/RightItemHeight';
var RightItemText = [];

import AlphabetaList from './city/alphabetaList';

const BusyIndicator = require('react-native-busy-indicator');
const loaderHandler = require('react-native-busy-indicator/LoaderHandler');

class CitySelect extends Component {
  constructor(props) {
     super(props)
     this.state = {
       modalY: new Animated.Value(deviceHeight),
       city:{}
     }
  }

  componentDidMount() {
      loaderHandler.showLoader("加载中...");
      InteractionManager.runAfterInteractions(() => {
        this.setState({
          city:this.props.cityData
        })
      });

  }

  componentWillReceiveProps(props){
      InteractionManager.runAfterInteractions(() => {
        loaderHandler.showLoader("加载中...");
        this.setState({
          city:props.cityData
        })
      });
  }

  componentDidUpdate(){
      loaderHandler.hideLoader();
  }

  renderCityItem(cityData) {
    const cityItem = cityData.map((i, item) => (
      <TouchableOpacity
        style={styles.city}
        key={i.cityId}
        activeOpacity={0.2}
        onPress={this.props.selectCity.bind(this,i)}
      >
        <Text style={styles.cityText}>
          {i.cityName}
        </Text>
      </TouchableOpacity>
    ))

    return cityItem
  }

  renderHeader(){
    const cancelText={
      color: this.props.cancelColor,
      fontSize: this.props.cancelSize
    }
    if(this.props.header){
      return(
        <View style={styles.header}>
          {/*<TouchableOpacity
            style={styles.cancel}
            onPress={this.props.cancelCity}
          >
            <Text style={cancelText}>
              {this.props.cancelText}
            </Text>
          </TouchableOpacity>
          */}
          <Text style={{color:'#FFF'}}>
            {this.props.titleText}
          </Text>
        </View>
      )
    }
  }

  renderCitys() {
    const CITY= this.state.city;
    RightItemText = [];
    const citys = Object.keys(CITY).map((index, ele) => {
      RightItemText.push(index);
      return(
        <View key={index} onLayout={
            (e)=>{
                    RightItemHeight.push(e.nativeEvent.layout.height);
                }
            }>
          <Text style={styles.title}>
            {index}
          </Text>
          <View style={styles.cityBox}>
            {this.renderCityItem(CITY[index])}
          </View>
        </View>
      )})

    return citys
  }

  getScroll() {
        return this.refs.myScroll;
  };

  render() {
    return (
      <View
        style={styles.container}
      >
          {this.renderHeader()}
          <ScrollView ref="myScroll" showsVerticalScrollIndicator={false}>
            {this.renderCitys()}
          </ScrollView>
          <AlphabetaList scroll={()=>this.getScroll()} RightItemText={RightItemText}/>
          <BusyIndicator />
      </View>
    )
  }
}

CitySelect.defaultProps = {
  cancelText: '取消',
  titleText: '选择城市',
  header: true,
  cancelColor: '#51a8fb',
  cancelSize : 14,
}

CitySelect.propTypes = {
  header: React.PropTypes.bool,
  cancelText: React.PropTypes.string,
  cancelColor: React.PropTypes.string,
  cancelSize: React.PropTypes.number,
  titleText: React.PropTypes.string,
  cancelCity: React.PropTypes.func.isRequired,
  selectCity: React.PropTypes.func.isRequired,
  cityData: React.PropTypes.object.isRequired,
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#FFF',
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
  header: {
    paddingTop: Platform.OS == 'ios'?35:15,
    paddingLeft: 10,
    paddingRight: 10,
    paddingBottom:15,
    backgroundColor: '#18bdce',
    alignItems: 'center',
    borderColor: '#F2F2F2',
    borderBottomWidth:1,
  },
  cancel: {
    position: 'absolute',
    left: 10,
  },
  title: {
    backgroundColor: '#F2F2F2',
    padding: 10,
    color: '#333',
    fontSize: 10,
  },
  cityBox: {
    flex: 1,
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  city: {
    width: deviceWidth*1/3,
    height: 40,
    borderRightWidth: 1,
    borderBottomWidth: 1,
    borderColor: '#f3f3f3',
    alignItems: 'center',
    justifyContent: 'center'
  },
  cityText: {
    color: '#333',
    fontSize: 12,
  }
})

export default CitySelect;
